import React,{useRef,useEffect} from 'react';
import * as echarts from 'echarts';
import {get} from "../../../service";
function BarChart(props) {
    const ref =useRef()
    useEffect(()=>{
        const echart= echarts.init(ref.current)
        const options = {
            tooltip:{
                show:true
            },
            grid:{
                left:10,
                bottom:10,
                top:10,
                containLabel:true //计算坐标和内容位置
            },
            yAxis:{
            },
            xAxis:{
                type:'category',//类型为类目
                splitLine:{show:false},//不显示网格线
            },
            series:[
                {
                    name:'销售额',
                    type:'bar',//柱状图
                    itemStyle:{
                        color:'#73c0de'
                    }
                }
            ]
        }
        echart.setOption(options)
        window.addEventListener('resize',()=>{
            echart.resize()
        })
        get('/api/overview/volumetop10').then(res=>{
            echart.setOption({
                dataset:{source:res.records}
            })
        })
    },[])
    return (
        <div ref={ref} style={{height:'100%'}}></div>
    );
}

export default BarChart;